<template>
  <!-- 骨架屏的高度宽度和背景，用绝对定位提高层级 -->
  <view v-if="show">
    <view class="padding-10" :style="{
		width: windowWidth,
		height: windowHeight,
		backgroundColor: bgColor,
		position: 'absolute',
		zIndex: 9999,
		top: top,
		left: left
	}">

      <view v-for="(item,index) in rectNodes" :key="index + 'Rect'" class="skeleton-fade" :style="{
			width: item.width + 'px',
			height: item.height + 'px',
			backgroundColor: elColor,
			position: 'absolute',
			top: item.top + 'px',
			left: item.left + 'px'
		}">
      </view>
    </view>
  </view>
</template>

<script>
  let systemInfo = uni.getSystemInfoSync();
  export default {
    name: 'skeleton',
    props: {
      show: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        windowWidth: systemInfo.windowWidth + 'px',
        windowHeight: systemInfo.windowHeight + 'px',
        bgColor: '#fff',
        elColor: '#e5e5e5',
        top: 0,
        left: 0,
        rectNodes: [{
          "id": "",
          "dataset": {},
          "left": 15,
          "right": 87,
          "top": 4,
          "bottom": 30.5,
          "width": 72,
          "height": 32
        }, {
          "id": "",
          "dataset": {},
          "left": 102,
          "right": 360.20001220703125,
          "top": 4,
          "bottom": 32,
          "width": 258.20001220703125,
          "height": 32
        }],
      }
    },
    mounted() {
      // 矩形骨架元素
      this.getRectEls();
      // 圆形骨架元素
      this.getCircleEls();
    },
    methods: {
      getRectEls() {
        let query = uni.createSelectorQuery().in(this.$parent)
        query.selectAll('.skeleton-rect').boundingClientRect(res => {
          console.log('rect', JSON.stringify(res));
        }).exec(function() {

        })
      },
      getCircleEls() {
        let query = uni.createSelectorQuery().in(this.$parent)
        query.selectAll('.skeleton-circle').boundingClientRect(res => {
          console.log('circle', JSON.stringify(res));
        }).exec(function() {

        })
      }
    },
  }
</script>

<style>
  .skeleton-fade {
    width: 100%;
    height: 100%;
    background: rgb(194, 207, 214);
    animation-duration: 1.5s;
    animation-name: blink;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  @keyframes blink {
    0% {
      opacity: .4;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: .4;
    }
  }
</style>